<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本域 Textarea-表单-ZPCode UI Kits</title>
  <link rel="stylesheet" href="http://zx4.com:8001/kits/css/zpcode.min.css">
  <link rel="stylesheet" href="../statics/css/index.css">
  <link rel="stylesheet" href="../statics/highlight/styles/github-dark.min.css">
  <!--zpcode.min.js-->
  <script src="http://zx4.com:8001/kits/webcomponents/ZPElement.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/form/textarea.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/search/style01.js" type="module" defer></script>
  <!--zpcode.min.js-->
  <script src="../statics/webcomponents/layout/leftnav.js" type="module" defer></script>
  <script src="../statics/webcomponents/layout/footer.js" type="module" defer></script>
  <script src="../statics/js/form/textarea.js" type="module" defer></script>
  <script src="../statics/js/extra.js" type="module" defer></script>
</head>
<body class="dark">
  <div class="mih12p f">
    <left-nav current="textarea"></left-nav>
    <div class="fa bl1" style="width:0">
      <div class="c ma mt48 pb48">
        <h1>文本域 Textarea</h1>

        <hr class="mt24 mb24">
        <h2 id="default"># 默认文本域</h2>
        <p>👇效果演示：</p>
        <div class="quote f fw">
          <zp-textarea style="--content:#333"></zp-textarea>
        </div>
        <p>👇代码演示：</p>
        <pre class="pr"><code class="hljs language-xml zp-textarea-default-html"></code></pre>

        <hr class="mt24 mb24">
        <h2 id="size"># 改变宽高</h2>
        <p>👇效果演示：</p>
        <div class="quote f fw">
          <div class="w12p">
            <zp-textarea style="--content:#333" rows="3" width="50%"></zp-textarea>
          </div>
        </div>
        <p>👇代码演示：</p>
        <pre class="pr"><code class="hljs language-xml zp-textarea-size-html"></code></pre>
        <p>
          <code>rows</code>可改变文本域行数，即高度。<br>
          <code>cols</code>可改变文本域列数，即宽度。另外，也可通过<code>width</code>属性改变宽度。<br>
        </p>

        <hr class="mt24 mb24">
        <h2 id="colors"># 改变颜色</h2>
        <p>使用规则，请参照<a href="/form/input.html#color">《表单：输入框-改变颜色》</a>。</p>

        <hr class="mt24 mb24">
        <h2 id="maxlen"># 最大输入限制</h2>
        <p>👇效果演示：</p>
        <div class="quote f fw">
          <div class="pb8 w12p">
            <zp-textarea 
              width="50%"
              maxlen="10" 
              showmaxlen="1"
              style="
                --zp-input-bgcolor:#151f32;
                --zp-input-border-color:#2f3b4c;
                --content:#fff;
              "
            ></zp-textarea>
          </div>
        </div>
        <p>👇代码演示：</p>
        <pre class="pr"><code class="hljs language-xml zp-textarea-maxlen-html"></code></pre>
        <p>
          <code>maxlen</code>控制输入长度最大限制。<br>
          <code>showmaxlen</code>控制是否显示字数限制提示。
        </p>

      </div>
      <zp-footer></zp-footer>
    </div>
    <div class="w200">
      <ul class="bl1 p0 mt48 pl24 ps t48 lh30">
        <li><a href="#default" class="txt-con txt-p-h">默认文本域</a></li>
        <li><a href="#size" class="txt-con txt-p-h">改变宽高</a></li>
        <li><a href="#color" class="txt-con txt-p-h">改变颜色</a></li>
        <li><a href="#maxlen" class="txt-con txt-p-h">最大输入限制</a></li>
        <li class="mt12"><a href="#" class="txt-cg txt-b-h fs12">▲ 顶部</a></li>
      </ul>
    </div>
  </div>
  <script src="../statics/highlight/highlight.min.js"></script>
  <script src="../statics/highlight/languages/xml.min.js"></script>
  <script src="../statics/highlight/languages/css.min.js"></script>
</body>
</html>